<template>
	<el-dialog :visible.sync="addVisible" width="75%" :show-close='false' class="reviewFlowDialog" :closeOnClickModal='false' append-to-body>
		<span slot="title" class="dialog-title">
				<span v-if="procInstType != 't_report_prepare'">审核{{reviewTitle}}</span>
        <span v-if="procInstType == 't_report_prepare'">{{reviewTitle}}</span>
				<el-button  size="mini" @click="closeSelf" class="popupClose">关闭</el-button>
			 </span>
		<div id="myIframe" v-if="reload" v-loading="loading"  style = "text-align:center;">
			<!--<form id="form1" action="" target="target1" method="post">
				<input type="hidden" name="datas" id="data_param" />
			</form>-->
			<span style = "color:#909399;line-height:100px;" v-if = "WorkFlowMsg != '' && WorkFlowMsg != undefined" >{{WorkFlowMsg}}</span>
			<iframe :src="url" id="workFlowIframe" ref="workFlowIframe" name = "target1" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
		</div>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	import $ from 'jquery'

	export default {
		data() {
			return {
				loading: true,
				url: null,
				reload: true,
				loadingObj: {
					loading: true
				},
				workFlowIframe:null,
				WorkFlowMsg:"",
			}
		},
		computed: {
			...mapState([]),
		},
		props: ['addVisible', 'reviewData', 'procInstType', 'reviewTitle'],
		mounted() {


		},
		watch: {
			addVisible(val) {
				if (val) {
					var that = this;
          // console.log()
					this.reLoad(); //打开弹框 重新加载数据
					if(process.env.NODE_ENV == 'development'){
						this.url = "../../static/workflow.html?id=" + this.reviewData.id + "&procInstType=" + this.procInstType + "&timestamp=" + new Date().getTime()

					}else{
						this.url = "static/workflow.html?id=" + this.reviewData.id + "&procInstType=" + this.procInstType + "&timestamp=" + new Date().getTime()

					}
					window.addEventListener('message', that.handleMessage)


				}
			}
		},
		methods: {
			// 是否重新加载
			reLoad() {
				this.reload = false;
				this.$nextTick(() => {
					this.reload = true;
				})
			},
			// 审核成功之后关闭自己并关闭详情页面
			close2() {
				this.$emit('reloadMain')  //刷新父页面
				this.$emit('update:addVisible', false);
				this.loading = true;
				this.$store.commit('passItem',null)
			},
			// 点击关闭，关闭自己
			closeSelf(){
				this.$emit('update:addVisible', false);
				this.loading = true;
				this.$store.commit('passItem',null)
				this.WorkFlowMsg = "";
			},

			handleMessage(event) {
        console.log(event.data)
				const data = event.data;
				switch (data.cmd) {
					case 'close':
					this.WorkFlowMsg = "";
						this.close2()
					break
					case 'loadingHide':
						this.loading = false;
						this.WorkFlowMsg = "";
					break
					case 'errorMsg':
						this.loading = false;
						this.WorkFlowMsg = "没有查询到审核信息"
					break
          case 'reportReview':
            this.$emit('changeStatus')
          	this.WorkFlowMsg = "";
            this.close2()

          break
				}
			},


		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.reviewFlowDialog .el-dialog {
		height: 80%;
		margin-top: 10vh !important;
	}

	.reviewFlowDialog .el-dialog .el-dialog__body {
		padding: 10px !important;
		height: calc(100% - 40px);
	}

	#myIframe {
		height: 100%;
		width: 100%;
	}
	/*table滚动条*/

	#workFlowIframe::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	#workFlowIframe::-webkit-scrollbar-thumb {
		border-radius: 10px;
		/*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
		background: #b1d8ff;
	}

	#workFlowIframe::-webkit-scrollbar-track {
		/*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
		border-radius: 10px;
		background: #e6e6e6;
	}
</style>
